@font-face{
	font-family:"Tipos";
	src: url("../fonts/The Led Display St.ttf");	
}
@font-face{
	font-family:"TITULO";
	src:url("../fonts/DJ Icons.ttf");
}


body{
	font-size:20px;
	text-align:justify;
	background-color:#999999;
	margin:auto;
	padding:auto;
}
header{
	background-image: url("../img/fondo1.gif");
	margin:4px;
	padding:5px;
	color:white;
	border:3px solid gray;
	border-radius:30px 34px 40px;
	display:flex;
	min-height:150px;
}


h1{	
font:35px "Tipos";
}

.menu{        
list-style: none;
margin: 20px;
padding: 10px;
background:#85a5f2;
border:2px solid black;
border-radius: 8px;
width:70px;
}


#desple {
    display: none;
	list-style: none;
    position: absolute;
	background:#85a5f2;
	border:2px groove black;
	border-radius: 8px;
}


#desple  a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#desple  a:hover {
    background-color: #ddd;
}

.menu:hover #desple {
    display: block;
}



#clase {
	min-height:550px;
	margin:2px;
	padding:2px;
	display:flex; 
	flex-direction:row; 
	
}

#clase > article{
	margin:5px;
	padding:6px;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:50%; 
	order:2; 
}

#clase > nav{
	background-image: url("../img/music.jpg");
	background-repeat:repeat;
	display:inline-block;
	border:4px solid gray;
	border-radius:20px 22px 20px;
	margin:0px;
	padding:0px;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:25%;
	order:1;
}
iframe{
	border:5px groove black;
	border-radius:20px 22px 20px;
}



footer{
	display:flex;
	text-align:center;
	margin:2px;
	padding:3px;
	min-height:100px;
	border:6px outset gray;
	border-radius:20px 26px 34px;
	background-color: #336666;
}

@media all and (max-width: 640px){
	#clase{
	flex-direction:column;
	}
	nav{
	min-height:250px;
	}
	iframe{
		width:500px;
		height:500px;
	}
	#clase > article{
		order:1;
	}
	#clase > nav{
		order:0;
	}
	
}